<template>
    <Dialog class="order-dialog" :openVis="visible" width="60%" :title="title" @close="closeDialog" :maskClosable="false">
        <template #container>
            <BasicTable
                ref="registerTable"
                class="table-container"
                :class="[themeType]"
                :key="visible"
                :columns="columns"
                :api="getOrderDetail"
            ></BasicTable>
        </template>
    </Dialog>
</template>
<script setup lang="ts">
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
    import { useDialog } from '/@/views/components/dialogHooks.ts';
    import { ref, watch } from 'vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
    import { getOrderDetail } from '/@/components/body-d-left/left.api.ts';

    const props = defineProps({
        title: String,
    });
    const { themeType } = useTheme();
    const columns = [
        {
            title: '被救助人',
            dataIndex: 'salvageUserName',
            key: 'salvageUserName',
        },
        {
            title: '单位',
            dataIndex: 'salvageUserSecondDepart',
            key: 'salvageUserSecondDepart',
            ellipsis: true,
        },
        {
            title: '部门',
            dataIndex: 'salvageUserDepart',
            key: 'salvageUserDepart',
            ellipsis: true,
        },
        {
            title: '性别',
            dataIndex: 'salvageUserSex',
            key: 'salvageUserSex',
            width: 80,
            customRender: ({ text }) => {
                if (!text) return '';
                return text == '1' ? '女' : '男';
            },
        },
        {
            title: '求助方式',
            dataIndex: 'initiatorType',
            key: 'initiatorType',
            width: 100,
            customRender: ({ text }) => {
                return text == '0' ? '120' : text == '1' ? '应急就医' : '';
            },
        },
        {
            title: '求助时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '电话',
            dataIndex: 'salvageUserMobile',
            key: 'salvageUserMobile',
        },
    ];
    const { visible, title, closeDialog, openDialog } = useDialog({ title: props.title });
    const registerTable = ref(null);
    watch(props, () => {
        registerTable.value?.getRecords();
    });
    defineExpose({
        openDialog,
    });
</script>

<style scoped lang="less">
    .table-container {
        margin: 10px;
    }
</style>
